<template>
	<div class="app-container" style="padding:30px;">
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <h4>商品报损</h4>
        <el-divider></el-divider>
      </div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-form>
     <el-col :span="7">
         <el-form-item label="选择仓库">
           <el-select v-model="insert.depotId" placeholder="请选择进货仓库">
             <el-option v-for="plate in depots" :value="plate.id" :key="plate.id"             
               :label="plate.name"></el-option>
           </el-select>
         </el-form-item>
     </el-col>
      </el-form>
    </el-row>

              <el-table :data="insert" :border=true style="width: 100%;">
              	<el-table-column prop="id" label="序号" width="50"> </el-table-column>
                  <el-table-column prop="productId" label="所属商品" width="300">
                  	<template slot-scope="scope">
              	<el-input v-model="scope.row.productname" placeholder="请选择商品" @focus="addId(scope.$index)" style="width:150px;"></el-input>
                <el-button @click="addId(scope.$index)">选商品</el-button>
                </template>
                  </el-table-column>
                  <el-table-column prop="unit" label="单位" width="100"> </el-table-column>
                  <el-table-column prop="standby1" label="单价"width="100"> </el-table-column>
                  <el-table-column prop="num" label="数量"width="100"> </el-table-column>
                  <el-table-column prop="total" label="报损金额" width="100"> </el-table-column>
                  <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                    	 <el-dialog
  placement="right"
  width="300" :visible.sync="setshow">
  <el-table :data="updateId">
  	<el-input prop="id" type="hidden"></el-input>
  	<el-table-column prop="productname" label="商品名称" width="100"> </el-table-column>
  	<el-table-column prop="danWei" label="单位" width="100"> </el-table-column>
  	<el-table-column prop="shou" label="售价" width="100"> </el-table-column>
  	<el-table-column prop="standby2" label="商品数量" width="100">
  		<template slot-scope="scope">
    	<el-input v-model="scope.row.standby2" @blur="jisuan(scope.row)"></el-input>
    	</template>
  	</el-table-column>
  	<el-table-column prop="standby1" label="小计" width="100"></el-table-column>
  	<el-table-column label="操作" width="100">
  		<template slot-scope="scope">
    <el-button size="mini" @click="add(scope.row)">确定</el-button>
  </template>
  	</el-table-column>
  </el-table></el-dialog>
                       <el-button size="mini" type="danger" plain @click="delmembers(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
               </el-table>
               <i class="el-icon-circle-plus-outline" @click="addmembers"></i>
               <el-button type="primary" @click="inserts">提交</el-button>
  </div>
</div>
</template>

<script>
	import { lossesadd } from "@/api/losses.js";
	import {show} from '@/api/product';
	import {getAll} from '@/api/depot';
	import {getUserId} from '@/utils/auth';
	import {Inventoryall} from '@/api/Inventory';
	export default {
      data() {
         return {
         	updateId:[],
         	depots:[],
         	total:0,
         	index:'',
         	setshow:false,
         	insert:[{
         	id:'1',
        	productId:'',
        	productname:'',
        	unit:'',
        	standby1:'',
        	num:'',
        	userId:'',
        	depotId:'',
        	total:''
        }]
    };
      },created() {//页面加载是获取仓库的名称和编号
      getAll({}).then((res)=>{
      	this.depots=res.data;
      });
    },
  methods: {
  	jisuan(row){//失去焦点时计算价格
  		row.standby1=row.shou*row.standby2;
  	},
      inserts(){
      	let depot=this.insert.depotId;
      	let than=this;let msg;
      	try{this.insert.forEach(function(form) {
	      	if(depot==null || depot==""){
	      		//提交时仓库不能为未选择
                throw new Error("depot");
	      	}else if(form.productId==null || form.productId==""){
	      		//提交时商品不能为未选择
                throw new Error("product");
	      	}else{
				 lossesadd({
				 'productId':form.productId,
				 'unit':form.unit,
				 'num':form.num,
				 'standby1':form.standby1,
				 'userId':getUserId(),
				 'depotId':depot,
				 'total':form.total
				 }).then((res)=>{
				 	if(res.data){
      			    than.$message({
                    message: '提交成功!',
		            type: 'success',
		            onClose:  () =>{
		            location.reload();
		            }});
				   }else{
				   	msg=res.msg;
      			    throw new Error("fase");
				   }
				 }).catch((e)=>{
				 if(e.message=="fase"){
	      		than.$message({
                message: msg,
                type: 'error'
               });
	      }
				 });
	      	}
     });
      	}catch(e){
      	if(e.message=="depot"){
        this.$message({
                message: '请选择仓库!',
                type: 'warning'
          });
      	}else if(e.message=="product"){
	      		this.$message({
                message: '请选择商品!',
                type: 'warning'
               });
	      }
      	}
      },addmembers() {
      	//点击+号时在页面添加一列无数据展示表
           let length = this.insert.length;
           this.insert.push(
           {
             id: parseInt(length+1),
             productId:'',
             unit: '',
             num: '',
             userId:'',
             depotId:'',
             total:''
           })
         },addId(index){
         	//点击按钮按照仓库查询商品表
         	let deopt=this.insert.depotId;
         	if(deopt!=null && deopt!=""){
         	this.setshow=true;
         	this.index=index;
         	Inventoryall({'typeName2':deopt}).then((response) => {
      this.updateId = response.data;
  	this.updateId.standby1=0;
    });}else{//仓库未选择时不许查询商品
    	this.$message({
                message: '请选择仓库!',
                type: 'warning'
          });
    }
         },add(row){//点击按钮为主页面添加一条数据
         	var ins=this.insert;
         	if(row.standby2!=null && row.standby2!=0){
         		ins[this.index].productname=row.productname;
         		ins[this.index].num=row.standby2;
         		ins[this.index].standby1=row.shou;
         		ins[this.index].productId=row.proId;
         		ins[this.index].unit=row.danWei;
         		ins[this.index].total=row.standby1;
         	    this.setshow=false;
         }else if(row.standby2==0 || row.standby2==null){
         	//商品数量不能为0
         	    this.$message({
                message: '商品数量不能为0!',
                type: 'warning'
                });
         }
         },
          delmembers(index, row) {
          	//删除时顶层列不能删除
            if(row.id==1){
              this.$message({
                   showClose: true,
                   message: '请至少保留一行',
                   type: 'error'
              });
            }else{
              this.$confirm('确认删除吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
              }).then(() => {
                 //点击确定的操作
                 var hasmembers = this.insert;
                 for (var i = 0; i < hasmembers.length; i++) {
                     if (row.id == hasmembers[i].id) {
                         hasmembers.splice(i, 1);
                      }
                  }
                }).catch(() => {
                    return;
                });
            }
          }
    }
   };
</script>

<style>
</style>